import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/comics/ComicsPageViewModel.dart';
import 'package:flutter_app/model/ComicsChapterData.dart';
import 'package:flutter_app/model/SearchComicsData.dart';
import 'package:provider/provider.dart';

import 'ComicsContentPage.dart';

class ComicsPage extends StatefulWidget{
  ComicsPage({Key key, @required this.comicsData}) : super(key: key);
  final SearchComicsData comicsData;

  @override
  State<StatefulWidget> createState()  => _ComicsPageState( comicsData: comicsData);

}

class _ComicsPageState extends State<ComicsPage>{
  _ComicsPageState({@required this.comicsData});
  final SearchComicsData comicsData;

  ComicsPageViewModel viewModel = ComicsPageViewModel();

  @override
  void initState() {
    super.initState();
    viewModel.getChapter(comicsData.cartoonId);
  }

  @override
  Widget build(BuildContext context) {
    return  Material(
        child: ChangeNotifierProvider(
          create: (_) => viewModel,
          child: Consumer<ComicsPageViewModel>(builder: (_, model, __) {
            return CustomScrollView(
              slivers: [
                SliverAppBar(
                  leading: IconButton(
                      icon: Icon(
                        Icons.arrow_back_ios,
                        color: Colors.blueGrey,
                      ),
                      onPressed: () {
                        Navigator.pop(context);
                      }),
                  title: Text(
                    comicsData.title,
                    style: TextStyle(color: Colors.blueGrey),
                  ),
                  expandedHeight: 400.0,
                  centerTitle: true,
                  pinned: true,
                  backgroundColor: Colors.yellow,
                  flexibleSpace: FlexibleSpaceBar(
                    background: Image.network(
                      comicsData.cover,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                SliverFixedExtentList(
                  itemExtent: 50,
                  delegate:
                  SliverChildBuilderDelegate((BuildContext context, int index) {
                    var item = model.list.isEmpty
                        ? ComicsChapterData(title: "", chapterId: "")
                        : model.list[index];
                    return GestureDetector(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (BuildContext context) =>
                                    ComicsContentPage(model.list[index].chapterId)));
                      },
                      child: ListTile(
                        title: Text(item.title),
                      ),
                    );
                  }, childCount: model.list.length),
                )
              ],
            );
          }),
        ));
  }
}